<template>
    <div class="upload-wrap">
        <div class="controls" style="display: flex; gap: 12px; align-items: center; margin-bottom: 12px">
            <el-select v-model="selectedType" placeholder="请选择文件类型" clearable style="width: 160px">
                <el-option label="Clinical" value="clinical"></el-option>
                <el-option label="RNA" value="rna"></el-option>
                <el-option label="WES" value="wes"></el-option>
            </el-select>

            <el-select v-model="visibility" placeholder="请选择权限" clearable style="width: 160px">
                <el-option label="私有 (private)" value="private"></el-option>
                <!-- <el-option label="群共享 (group)" value="group"></el-option> -->
                <el-option label="公开 (public)" value="public"></el-option>
            </el-select>

            <!-- 可选：显示当前已选择文件名 -->
            <div v-if="fileName" class="file-info">{{ fileName }}</div>

            <el-upload
                :http-request="uploadReq"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :auto-upload="true"
            >
                <el-button size="small" :disabled="!selectedType || !visibility">上传文件</el-button>
            </el-upload>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import { post } from '@/axios/api'; // 你现有的封装

    const selectedType = ref<string | null>(null); // 'clinical' | 'rna'
    const visibility = ref<string | null>(null); // 'private' | 'public'
    const fileName = ref<string | null>(null);

    const emit = defineEmits<{
        (e: 'uploaded', info: any): void
    }>();

    /**
     * 在上传前做校验：必须先选择类型和权限。
     * 可以在这里补充文件大小或后缀检查。
     */
    const beforeUpload = (file: File) => {
        // 1) 检查是否选择文件类型和权限
        if (!selectedType.value) {
            ElMessage.warning('请先选择文件类型（临床/RNA/WES ）');
            return false;
        }
        if (!visibility.value) {
            ElMessage.warning('请先选择文件权限（私有 或 公开）');
            return false;
        }

        // 2) 可选：文件大小限制（示例：不超过 200MB）
        const maxSizeMB = 200;
        if (file.size / 1024 / 1024 > maxSizeMB) {
            ElMessage.error(`文件不能大于 ${maxSizeMB}MB`);
            return false;
        }

        // 3) 可选：根据 selectedType 做后缀校验（若需要）
        // if (selectedType.value === 'rna' && !/\.(fastq|fq|txt|csv|tsv)$/i.test(file.name)) {
        //   ElMessage.warning('RNA 文件应为 fastq / fq / txt / csv / tsv 等格式');
        //   return false;
        // }

        // 记录文件名以便展示
        fileName.value = file.name;

        // 允许上传
        return true;
    };

    /**
     * 自定义上传处理，使用你的 post 封装上传 FormData
     * option 结构来自 element-plus 的 httpRequest：{ file, onProgress, onError, onSuccess, ... }
     */
    const uploadReq = async (option: any) => {
        const file: File = option.file;
        const form = new FormData();
        form.append('file', file);
        form.append('data_type', selectedType.value ?? 'rna');
        form.append('visibility', visibility.value ?? 'private');

        try {
            // 如果你的 post 支持第三个参数传 config（包含 headers & onUploadProgress）
            const res:any = await post('files/', form, {
                headers: { 'Content-Type': 'multipart/form-data' },
                // 支持 progress 时把进度回传给 el-upload
                onUploadProgress: (progressEvent: ProgressEvent) => {
                    if (option.onProgress) {
                        const percent = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1));
                        option.onProgress({ percent });
                    }
                }
            });
            // 成功回调
            option.onSuccess?.(res, file);

            // 触发全局事件（包含 detail 信息，便于外面监听）
            window.dispatchEvent(
                new CustomEvent('uploaded', {
                    detail: {
                        result: res.data,
                        data_type: selectedType.value,
                        visibility: visibility.value,
                        filename: file.name
                    }
                })
            );

            // 清除已选文件名（可根据需求保留）
            fileName.value = null;

            
            emit('uploaded', {
                result: res,
                data_type: res.data_type,
                visibility: res.visibility,
                filename: res.name
            });

        } catch (err: any) {
            console.error('upload error', err);
            option.onError && option.onError(err);
            ElMessage.error('上传失败，请重试');
        }
    };
</script>

<style scoped>
    .file-info {
        font-size: 13px;
        color: #606266;
        padding-left: 6px;
    }
</style>
